<template>
  <div class="container">
    <div class="header">
      <el-input
        style="width:200px"
        v-model="search.fphm"
        placeholder="请输入发票号码"
        clearable
      ></el-input>
      <el-select
        clearable
        v-model="inside.value"
        :multiple="false"
        filterable
        remote
        center
        reserve-keyword
        placeholder="请选择供应商"
        :remote-method="insideRemoteMethod"
        :loading="inside.loading"
      >
        <el-option
          v-for="item in inside.list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="search.status" placeholder="请选择状态">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch()"
        >查询</el-button
      >
      <el-button type="danger" icon="el-icon-delete" @click="empty()"
        >清空</el-button
      >
      <el-button
        type="primary"
        class="handleSearch"
        icon="el-icon-circle-plus"
        @click="ocrUpload()"
        >OCR发票上传</el-button
      >
      <el-button
        type="primary"
        class="handleSearch"
        icon="el-icon-circle-plus"
        @click="upload()"
        >源文件发票上传</el-button
      >
      <el-button type="info" icon="el-icon-tickets" @click="derive()"
        >商超发票明细导出</el-button
      >
      <!-- <el-upload
          class="upload-demo"
          style="display: inline; margin-left: 10px"
          action="#"
          :show-file-list="false"
          :http-request="handleAvatarSuccess"
        >
          <el-button
            size="mini"
            type="primary"
            class="handleSearch"
            icon="el-icon-circle-plus"
            >OCR发票上传</el-button
          >
        </el-upload> -->
    </div>
    <el-table
      max-height="600"
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%"
      empty-text="暂无数据"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="file_name"
        label="发票名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="fpdm"
        label="发票代码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="fphm"
        label="发票号码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="statusMsg"
        label="状态"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="is_cancelMsg"
        label="是否作废"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="xsfmc"
        label="销售方名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="hjje"
        label="合计金额"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="hjse"
        label="合计税额"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="jshj"
        label="加税合计"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="add_time"
        label="上传时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="add_admin"
        label="操作人"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="info"
            size="mini"
            icon="el-icon-warning-outline"
            @click="handleEdit(scope)"
            >详情</el-button
          >
          <!-- <el-button
            type="danger"
            size="mini"
            v-if="scope.row.is_cancel == 0 && scope.row.status == 1"
            icon="el-icon-circle-close"
            @click="cancellation(scope)"
            >作废</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="audit(scope)"
            >反审</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      @page="handleSizeChange"
      @pagesize="handleCurrentChange"
      :pageData="pageData"
    ></pagination>
    <billSuperInvoice
      :dialog="ocrDialog"
      @updateData="getData"
    ></billSuperInvoice>
    <editSuperBillInvoice :dialog="editDialog"></editSuperBillInvoice>
  </div>
</template>
<script>
import BillSuperInvoice from "@/components/bill/billSuperInvoice";
import EditSuperBillInvoice from "@/components/bill/editSuperBillInvoice";
import Pagination from "@/components/pagination";
import { getToken } from "@/utils/auth";
import {
  cancelInvoice,
  getSupplierOptions,
  getInvoiceSmkList,
  reExamineSmk
} from "@/api/bill";
export default {
  components: {
    pagination: Pagination,
    billSuperInvoice: BillSuperInvoice,
    editSuperBillInvoice: EditSuperBillInvoice
  },
  data() {
    return {
      //页面数据
      tableData: [],
      search: {
        status: "",
        fphm: ""
      },
      options: [
        { id: 1, name: "未匹配" },
        { id: 2, name: "部分匹配" },
        { id: 3, name: "已匹配完成" }
      ],
      inside: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      },
      supplier_code: "",
      multipleSelection: [],
      //dialog信息
      dialog: {
        dialogVisible: false
      },
      //dialog信息
      ocrDialog: {
        dialogVisible: false,
        os: 2,
        dialogType: null
      },
      editDialog: {
        dialogVisible: false,
        id: ""
      },

      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper"
      }
    };
  },
  created() {
    //页面数据
    this.getData();
    this.getSupplierList();
  },
  methods: {
    //页面数据
    getData() {
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        fphm: this.search.fphm,
        status: this.search.status,
        supplier_code: this.inside.value
      };
      getInvoiceSmkList(data)
        .then(res => {
          res.data.paginate.data.forEach(prop => {
            switch (prop.status) {
              case 1:
                prop.statusMsg = "未匹配";
                break;
              case 2:
                prop.statusMsg = "部分匹配";
                break;
              case 3:
                prop.statusMsg = "已匹配完成";
                break;
            }
            switch (prop.is_cancel) {
              case 0:
                prop.is_cancelMsg = "否";
                break;
              case 1:
                prop.is_cancelMsg = "是";
                break;
            }
          });
          this.tableData = res.data.paginate.data;
          this.pageData.total = res.data.paginate.total;
        })
        .catch(err => {});
    },
    // 导出
    derive() {
      this.$confirm("是否导出?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let link = document.createElement("a");
          link.href =
            this.$axios.defaults.baseURL +
            "/api/Invoicexd/exportInvoiceDetailsSmk?token=" +
            getToken() +
            "&fphm=" +
            this.search.fphm +
            "&status=" +
            this.search.status +
            "&supplier_code=" +
            this.inside.value;
          link.click();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出"
          });
        });
    },
    // 嵌套搜索供应商数据
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
        this.inside.options = [];
      }
    },
    //获取供应商数据
    getSupplierList(query = "") {
      let data = {
        supplier_code: query,
        page: 1,
        limit: 50
      };
      this.inside.loading = true;
      getSupplierOptions(data).then(res => {
        this.inside.list = res.data.options.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}(${item.code})` };
        });
        this.inside.loading = false;
      });
    },

    //作废
    cancellation(scope) {
      let data = {
        id: scope.row.id
      };
      this.$confirm("是否作废该条信息?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          cancelInvoice(data).then(res => {
            if (res.code == 0) {
              this.getData();
              this.$message({
                type: "success",
                message: res.msg || res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 反审
    audit(scope) {
      let data = {
        id: scope.row.id
      };
      this.$confirm("是否反审该条信息?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          reExamineSmk(data).then(res => {
            if (res.code == 0) {
              this.getData();
              this.$message({
                type: "success",
                message: res.msg || res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 搜索
    handleSearch() {
      this.pageData.total = null;
      this.pageData.page = 1;
      this.getData();
    },
    //清空
    empty() {
      this.search = {
        status: "",
        fphm: ""
      };
      this.inside = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      };
    },
    // OCR发票上传
    ocrUpload() {
      this.ocrDialog.dialogVisible = true;
      this.ocrDialog.dialogType = 1;
    },
    // OCR发票上传
    upload() {
      this.ocrDialog.dialogVisible = true;
      this.ocrDialog.dialogType = 2;
    },
    handleEdit(scope) {
      this.editDialog.dialogVisible = true;
      this.editDialog.id = scope.row.id;
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      this.getData();
    },
    //勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style scoped>
.header {
  margin-bottom: 10px;
}
.search {
  width: 200px;
  margin-right: 10px;
}
</style>
